<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted,ref,onBeforeUnmount } from "vue";

// cx  数据
const tableData = [
  {
    date: "杭州久碳科技有限公司",
    name1: "287",
    address: "345",
  },
  {
    date: "杭州久碳科技有限公司",
    name1: "287",
    address: "345",
  },
  {
    date: "杭州久碳科技有限公司",
    name1: "287",
    address: "345",
  },
  {
    date: "杭州久碳科技有限公司",
    name1: "287",
    address: "345",
  },
  {
    date: "杭州久碳科技有限公司",
    name1: "287",
    address: "345",
  },
  {
    date: "杭州久碳科技有限公司",
    name1: "287",
    address: "345",
  },
  {
    date: "杭州久碳科技有限公司",
    name1: "287",
    address: "345",
  },
  {
    date: "杭州久碳科技有限公司",
    name1: "287",
    address: "345",
  },
  {
    date: "杭州久碳科技有限公司",
    name1: "287",
    address: "345",
  },
  {
    date: "杭州久碳科技有限公司",
    name1: "287",
    address: "345",
  },
];

var carbon_energy_flag = ref(true);
var myChart:any = null;
onMounted(() => {
  // 第1个：能耗情况的  echarts实例化

  var energy_bottom_put:any = document.getElementById("energy_bottom_put")
  myChart = echarts.init(energy_bottom_put);
  // 能耗情况  圆环图对象
  var energy_option = {
    title: {
      text: `能耗总量\n${335 + 234 + 748 + 358 + 148}\n吨标煤`,
      left: "center",
      top: "center",
    },
    legend: {
      orient: "vertical",
      x: "92%",
      y: "middle",
      icon: "circle",
      data: ["煤", "气", "油品", "电", "热"],
    },
    series: [
      {
        type: "pie",
        radius: ["50%", "75%"],
        data: [
          {
            value: 335,
            name: `煤`,
          },
          {
            value: 234,
            name: `气`,
          },
          {
            value: 748,
            name: `油品`,
          },
          {
            value: 358,
            name: `电`,
          },
          {
            value: 148,
            name: `热`,
          },
        ],
        label: {
          formatter: "{b|{b}:} {per|{d}%}",
          rich: {
            per: {
              color: "#000",
              fontSize: 12,
              padding: [5, 8],
              borderRadius: 2,
            },
          },
        },
      },
    ],
  };
  // 能耗情况 绘制在实例上
  myChart.setOption(energy_option);

  // 第2个：碳排情况的  echarts实例化
  var carbon_bottom_put:any =   document.getElementById("carbon_bottom_put")
  myChart = echarts.init(carbon_bottom_put);
  // 碳排情况  圆环图对象
  var carbon_option = {
    title: {
      text: `碳排总量\n1000\n升`,
      left: "center",
      top: "center",
    },
    legend: {
      orient: "vertical",
      x: "92%",
      y: "middle",
      icon: "circle",
      data: ["煤", "气", "油品", "电", "热"],
    },
    series: [
      {
        type: "pie",
        radius: ["50%", "75%"],
        data: [
          {
            value: 335,
            name: `煤`,
          },
          {
            value: 234,
            name: `气`,
          },
          {
            value: 748,
            name: `油品`,
          },
          {
            value: 358,
            name: `电`,
          },
          {
            value: 148,
            name: `热`,
          },
        ],
        label: {
          formatter: "{b|{b}:} {per|{d}%}",
          rich: {
            per: {
              color: "#000",
              fontSize: 12,
              padding: [5, 8],
              borderRadius: 2,
            },
          },
        },
      },
    ],
  };
  // 碳排情况 绘制在实例上
  myChart.setOption(carbon_option);

  //柱状图
  var chartDom:any = document.getElementById("main");
  myChart = echarts.init(chartDom);
  var option;
  option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      top: "20%",
      left: "7%", // grid布局设置适当调整避免X轴文字只能部分显示
      right: "1%", // grid布局设置适当调整避免X轴文字只能部分显示
      bottom: "10%",
    },

    xAxis: [
      {
        // type: 'category',
        data: ["能源", "工业", "农业", "医疗", "制造业", "交通", "信息服务业"],
        axisTick: {
          alignWithLabel: true,
        },
        axisLable: {
          interval: 0,
          rotate: 45,
          textStyle: {
            color: "block",
            fontSize: 16,
            fontFamily: "Microsoft YaHEi",
          },
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "单位/家",
        nameTextStyle: {
          color: "#333",
          nameLocation: "start",
        },
      },
    ],
    series: [
      {
        type: "bar",
        data: [200, 400, 800, 1000, 800, 400, 200, 1200],
        label: {
          show: true,
          position: "top",
        },
        backgroundStyle: {
          //背景样式
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //颜色(渐变色)
            { offset: 0, color: "#83bf00" },
            { offset: 0.5, color: "#1800f0" },
            { offset: 1, color: "#1800f0" },
          ]),
        },
        itemStyle: {
          //柱状条样式
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //颜色(渐变色)
            { offset: 0, color: "#83bfff" },
            { offset: 0.5, color: "#188dff" },
            { offset: 1, color: "#188fff" },
          ]),
        },
      },
    ],
  };
  option && myChart.setOption(option);
});
onBeforeUnmount(()=>{
  myChart && myChart.clear();
  if (myChart != null) {
      myChart.dispose()
      myChart = null;
  }
  window.removeEventListener("resize", resize);
})
//页面改变重绘图表
var resize = ()=> myChart.resize();
window.addEventListener('resize',resize) 

// // 点击能耗切换到自己的饼状图
var energy_click = () => {
  carbon_energy_flag.value = true;
};
// 点击碳排切换到自己的饼状图
var carbon_click = () => {
  carbon_energy_flag.value = false;
};
</script>
<template>
  <div class="operation_first">
    <div class="operation_first_top">
      <div class="operation_first_top_left">
        <!-- 文章简述 -->
        <div class="operation_first_top_left_top">
          <div class="top">
            <div class="every">
              <div class="left">
                <el-icon class="icon">
                  <Link />
                </el-icon>
              </div>
              <div class="right">
                <p>文章总数(篇)</p>
                <div class="count">915</div>
              </div>
            </div>
            <div class="every">
              <div class="left">
                <el-icon class="icon">
                  <Link />
                </el-icon>
              </div>
              <div class="right">
                <p>文章总数(篇)</p>
                <div class="count">915</div>
              </div>
            </div>
            <div class="every">
              <div class="left">
                <el-icon class="icon">
                  <Link />
                </el-icon>
              </div>
              <div class="right">
                <p>文章总数(篇)</p>
                <div class="count">915</div>
              </div>
            </div>
            <div class="every">
              <div class="left">
                <el-icon class="icon">
                  <Link />
                </el-icon>
              </div>
              <div class="right">
                <p>文章总数(篇)</p>
                <div class="count">915</div>
              </div>
            </div>
          </div>
        </div>
        <div class="operation_first_top_left_bottom">
          <!-- 代办事宜 -->
          <div class="ysl_form">
            <div class="fromtop">
              <div class="pic"></div>
              <div>代办事宜</div>
            </div>
            <div class="frombot">
              <div class="fromcont">
                <div>入驻待审核企业</div>
                <div>23(家)</div>
                <el-button style="background-color: white" color="#2ac9c9" plain
                  >我来处理</el-button
                >
              </div>
              <div class="fromcont">
                <div>合同签订待处理</div>
                <div>42(家)</div>
                <el-button style="background-color: white" color="#2ac9c9" plain
                  >我来处理</el-button
                >
              </div>
              <div class="fromcont">
                <div>租户物业费催缴</div>
                <div>22(家)</div>
                <el-button style="background-color: white" color="#2ac9c9" plain
                  >我来处理</el-button
                >
              </div>
              <div class="fromcont">
                <div>潜在客户待签单</div>
                <div>37(家)</div>
                <el-button style="background-color: white" color="#2ac9c9" plain
                  >我来处理</el-button
                >
              </div>
            </div>
          </div>
          <!-- 最新动态 -->
          <div class="dynamic">
            <div class="dyn_top">
              <div class="dyn_top_left">
                <span class="pic_title"></span>
                <span class="text_title">最新动态</span>
              </div>
              <div class="dyn_top_right">more</div>
            </div>
            <div class="dyn_main">
              <div class="dy_main_box">
                <el-tag class="mx-1" type="" effect="plain">置顶</el-tag>
                <span class="dy_main_box_text"
                  >我(超级管理员)通过了{公司}的入驻申请</span
                >
              </div>
              <div class="dy_main_box">
                <el-tag class="mx-1" type="" effect="plain">置顶</el-tag>
                <span class="dy_main_box_text"
                  >我(超级管理员)通过了{公司}的入驻申请</span
                >
              </div>
              <div class="dy_main_box">
                <el-tag class="mx-1" type="danger" effect="plain">热门</el-tag>
                <span class="dy_main_box_text"
                  >我(超级管理员)通过了{公司}的入驻申请</span
                >
              </div>
              <div class="dy_main_box">
                <el-tag class="mx-1" type="danger" effect="plain">热门</el-tag>
                <span class="dy_main_box_text"
                  >我(超级管理员)通过了{公司}的入驻申请</span
                >
              </div>
              <div class="dy_main_box">
                <el-tag class="mx-1" type="danger" effect="plain">热门</el-tag>
                <span class="dy_main_box_text"
                  >我(超级管理员)通过了{公司}的入驻申请</span
                >
              </div>
              <div class="dy_main_box">
                <el-tag class="mx-1" type="warning" effect="plain">最新</el-tag>
                <span class="dy_main_box_text"
                  >我(超级管理员)通过了{公司}的入驻申请</span
                >
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="operation_first_top_right">
        <!-- 企业排名 -->
        <div class="form">
          <div class="header">
            <h3>园区优质企业排名TOP10</h3>
          </div>
          <el-table :data="tableData" stripe class="form_table">
            <el-table-column prop="date" label="企业名称" width="180">
              <template #default="scope">
                <span>{{ scope.row.date }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="name1" label="高新人才数" width="100">
              <template #default="scope">
                <span>{{ scope.row.name1 }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="address"
              label="企业估值（亿元）"
              width="150">
              <template #default="scope">
                <span>{{ scope.row.address }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>

    <div class="operation_first_bottom">
      <!-- 柱状图部分 -->
      <div class="botlf">
        <div class="botlf_top">
          <div class="side"></div>
          <div>园区企业资质资质情况</div>
        </div>
        <div class="count">
          <div class="smbox">
            <div>上市公司</div>
            <span style="color: green">88</span>
          </div>
          <div class="smbox">
            <div>高薪企业</div>
            <span style="color: orange">361</span>
          </div>
          <div class="smbox">
            <div>规上企业</div>
            <span style="color: blue">682</span>
          </div>
          <div class="smbox">
            <div>专精特新企业</div>
            <span style="color: blue">682</span>
          </div>
        </div>
        <el-row id="main"> </el-row>
      </div>

      <!-- 饼状图部分 -->
      <div class="carbon">
        <!-- 头部 -->
        <div class="carbon_top">
          <div class="carbon_top_left">
            <span class="pic_title"></span>
            <span class="text_title">园区双碳用能情况</span>
          </div>
          <div class="carbon_top_right">
            <div class="energy_consumption" @click="energy_click">能耗情况</div>
            <div class="carbon_send" @click="carbon_click">碳排情况</div>
          </div>
        </div>
        <!-- 底部 -->
        <div id="energy_bottom_put" v-show="carbon_energy_flag"></div>
        <div id="carbon_bottom_put" v-show="!carbon_energy_flag"></div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
/* 根元素 */
.operation_first {
  width: 100%;
  height: 100%;
  background-color: rgb(240, 242, 245);
  position: relative;
  display: flex;
  flex-direction: column;
}
.operation_first_top_left_top {
  padding-left: 8px;
}
.operation_first .operation_first_top {
  width: 100%;
  flex: 1;
  /* background-color: red; */
  box-sizing: border-box;
  padding-top: 10px;
  display: flex;
  justify-content: space-between;
  /* align-items: center; */
}

.operation_first
  .operation_first_top
  .operation_first_top_left
  .operation_first_top_left_bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 10px 10px 0 10px;
  height: 100%;
  flex: 1;
}

.operation_first .operation_first_top .operation_first_top_left {
  width: 600px;
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.operation_first .operation_first_top .operation_first_top_right {
  width: 450px;
  height: 100%;
  /* background-color: blue; */
}

.operation_first .operation_first_bottom {
  width: 100%;
  flex: 1;
  display: flex;
  justify-content: space-between;
  /* align-items: center; */
}

/* wr 饼状图部分css */
.operation_first .carbon {
  width: 50%;
  height: 100%;
  margin: 10px 10px 0 0;
  /* width: 50%;
  height: 50%; */
  background-color: white;
  padding: 20px;
}

.operation_first .carbon .carbon_top {
  width: 100%;
  /* height: 60px; */
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* background-color: red; */
}

.operation_first .carbon .carbon_top .carbon_top_left {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.operation_first .carbon .carbon_top .carbon_top_left .text_title {
  font-size: 20px;
  font-weight: 900;
}

.operation_first .carbon .carbon_top .carbon_top_left .pic_title {
  width: 10px;
  height: 28px;
  background-color: rgba(72, 110, 231, 0.87);
  margin-right: 20px;
}

.operation_first .carbon .carbon_top .carbon_top_right {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.operation_first .carbon .energy_consumption,
.operation_first .carbon .carbon_send {
  width: 97px;
  height: 33px;
  background-color: #00bfbf;
  border-radius: 5px;
  margin-left: 10px;
  text-align: center;
  line-height: 33px;
  color: white;
  font-size: 14px;
  cursor: pointer;
}

/* .operation_first .carbon .energy_consumption.active,
.operation_first .carbon .carbon_send.active {
  background-color: ;
} */
.operation_first .carbon #energy_bottom_put {
  width: 530px;
  height: 300px;
  /* width: 100%;
  height: 100%; */
  margin: auto;
  /* background-color: green; */
  margin-top: 10px;
}

.operation_first .carbon #carbon_bottom_put {
  width: 530px;
  height: 300px;
  /* width: 100%;
  height: 100%; */
  /* background-color: red; */
  margin: auto;
  margin-top: 10px;
}

/* wr 最新动态部分css */
.dynamic {
  flex: 1;
  height: 100%;
  background-color: white;
  box-sizing: border-box;
  padding: 20px;
  margin-left: 10px;
}

.dynamic .dyn_top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dynamic .dyn_top .dyn_top_left {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dynamic .dyn_top .dyn_top_right {
  text-decoration: underline;
  text-decoration-color: #027dbc;
  color: #027dbc;
  cursor: pointer;
}

.dynamic .dyn_top .dyn_top_left .text_title {
  font-size: 20px;
  font-weight: 900;
}

.dynamic .dyn_top .dyn_top_left .pic_title {
  width: 10px;
  height: 28px;
  background-color: rgba(72, 110, 231, 0.87);
  margin-right: 20px;
}

.dynamic .dyn_main {
  margin-top: 10px;
}

.dynamic .dyn_main .dy_main_box {
  margin-bottom: 10px;
}

.dynamic .dyn_main .dy_main_box .mx-1 {
  margin-right: 20px;
}

.dynamic .dyn_main .dy_main_box .dy_main_box_text {
  font-size: 14px;
}

/* cx  css */
.top {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 80px;
  width: 100%;
  background-color: white;
  /* margin: 15px; */
  box-sizing: border-box;
}

.top .every {
  display: flex;
  /* background-color: aqua; */
}

.top .every .left {
  background-color: #eee;
  border-radius: 50%;
  text-align: center;
  width: 50px;
  height: 50px;
  line-height: 50px;
  color: rgb(75, 75, 168);
  display: flex;
}

.top .every .left .icon {
  display: block;
  /* text-align: center;
  line-height: 50px; */
  font-size: 30px;
  margin: auto;
}

.top .every .right {
  padding-left: 20px;
}

.top .every .right p {
  font-size: 14px;
  padding: 5px 0;
}

.top .every .right .count {
  color: rgb(75, 75, 168);
}

.operation_first .operation_first_top .operation_first_top_right .form {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding-right: 10px;
}

.operation_first .operation_first_top .operation_first_top_right .form .header {
  height: 50px;
  color: white;
  line-height: 50px;
  background-color: aqua;
  text-align: center;
}

.operation_first
  .operation_first_top
  .operation_first_top_right
  .form
  .form_table {
  width: 100%;
  height: calc(100% - 50px);
}

:deep(.el-table .el-table__cell) {
  padding: 2px 0;
  font-size: 12px;
  color: rgb(102, 102, 102);
}

/* ysl 代办事宜*/
.operation_first .ysl_form {
  flex: 1;
  height: 100%;
  background-color: white;
  box-sizing: border-box;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.operation_first .ysl_form .fromtop {
  display: flex;
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: 900;
}

.operation_first .ysl_form .fromtop > .pic {
  width: 10px;
  height: 28px;
  background-color: rgba(72, 110, 231, 0.87);
  margin-right: 20px;
}

.operation_first .ysl_form .frombot {
  flex: 1;
}

.operation_first .ysl_form .frombot .fromcont {
  width: 100%;
  height: 20%;
  display: flex;
  margin-top: 5px;
}

.operation_first .ysl_form .frombot .fromcont > div {
  margin-left: 30px;
  margin-right: 30px;
  font-size: 14px;
}

/* ysl 柱状图样式 */
.operation_first .operation_first_bottom .botlf {
  height: 100%;
  width: 48%;
  margin-top: 10px;
  margin-left: 10px;
  background-color: white;
  overflow: hidden;
}

.operation_first .botlf .botlf_top {
  display: flex;
  margin: 20px 0 20px 20px;
}

.operation_first .botlf .botlf_top .side {
  width: 10px;
  height: 28px;
  background-color: rgba(72, 110, 231, 0.87);
  margin-right: 20px;
}

.operation_first .botlf .botlf_top > div {
  font-size: 20px;
  font-weight: 900;
}

.operation_first .botlf .count {
  display: flex;
  height: 30px;
  margin-bottom: 20px;
}

.operation_first #main {
  position: relative;
  height: 200px;
  width: 600px;
}

.operation_first .botlf .smbox {
  margin-top: 10px;
  width: 23%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.operation_first .botlf .smbox > div {
  font-size: 20px;
}

.smbox > span {
  font-size: 20px;
}

h2 {
  font-weight: bold;
}
</style>
